<template>
    <div>
      <Select v-model="mode1" style="width:200px;margin: 3px;" placeholder="请选择区">
        <Option v-for="item in areaList" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
     <Select v-model="mode2" style="width:200px;margin: 3px;" placeholder="请选择街道">
        <Option v-for="item in streeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
    </Select>
        <Select v-model="mode3" style="width:200px;margin: 3px" placeholder="请选择社区">
      <Option v-for="item in commList" :value="item.value" :key="item.value">{{ item.label }}</Option>
     </Select>
        <DatePicker type="date" placement="selectDate" placeholder="请选择时间" style="width: 200px">
        </DatePicker>
        <!-- <Select v-model="mode5" style="width:200px;margin: 3px" placeholder="姓名/电话">
      <Option v-for="item in nameList" :value="item.value" :key="item.value">{{ item.label }}</Option>
         </Select>-->
        <Input v-model="value" placeholder="请输入姓名/电话" style="width: 200px;margin: 5px" />
        <Button type="primary" >搜索</Button>
        <Modal v-model="modal1" title="查看详情" footer-hide  width="700px">
           <!-- <div slot="header" style ="display: none"></div>-->
           <Tabs value="name1">
                <TabPane label="考勤纪律" name="name1" style="height: 200px;overflow-y: scroll">
                    <Row class="p10" type="flex" justify="space-between">
                        <Col span="12">
                            <span class="bold">2019-04-01</span>
                        </Col>
                        <Col span="12">
                            <span>正常</span>
                        </Col>
                    </Row>
                    <Row class="p10">
                        <Col span="12">
                            <span class="bold">2019-04-02</span>
                        </Col>
                        <Col span="12">
                            <span>正常</span>
                        </Col>
                    </Row>
                    <Row class="p10">
                        <Col span="12">
                            <span class="bold">2019-04-03</span>
                        </Col>
                        <Col span="12">
                            <span>请假-1</span>
                        </Col>
                    </Row>
                    <Row class="p10">
                        <Col span="12">
                            <span class="bold">2019-04-04</span>
                        </Col>
                        <Col span="12">
                            <span>正常</span>
                        </Col>
                    </Row>
                    <Row class="p10">
                        <Col span="12">
                            <span class="bold">2019-04-05</span>
                        </Col>
                        <Col span="12">
                            <span>迟到-1</span>
                        </Col>
                    </Row>
                    <Row class="p10">
                        <Col span="12">
                            <span class="bold">2019-04-08</span>
                        </Col>
                        <Col span="12">
                            <span>正常</span>
                        </Col>
                    </Row>
                    <Row class="p10">
                        <Col span="12">
                            <span class="bold">2019-04-09</span>
                        </Col>
                        <Col span="12">
                            <span>正常</span>
                        </Col>
                    </Row>
                    <Row class="p10">
                        <Col span="12">
                            <span class="bold">2019-04-10</span>
                        </Col>
                        <Col span="12">
                            <span>正常</span>
                        </Col>
                    </Row>
                    <Row class="p10">
                        <Col span="12">
                            <span class="bold">2019-04-11</span>
                        </Col>
                        <Col span="12">
                            <span>正常</span>
                        </Col>
                    </Row><Row class="p10">
                    <Col span="12">
                        <span class="bold">2019-04-12</span>
                    </Col>
                    <Col span="12">
                        <span>正常</span>
                    </Col>
                </Row><Row class="p10">
                    <Col span="12">
                        <span class="bold">2019-04-15</span>
                    </Col>
                    <Col span="12">
                        <span>正常</span>
                    </Col>
                </Row><Row class="p10">
                    <Col span="12">
                        <span class="bold">2019-04-16</span>
                    </Col>
                    <Col span="12">
                        <span>正常</span>
                    </Col>
                </Row><Row class="p10">
                    <Col span="12">
                        <span class="bold">2019-04-17</span>
                    </Col>
                    <Col span="12">
                        <span>正常</span>
                    </Col>
                </Row>
                    <Row class="p10">
                        <Col span="12">
                            <span class="bold">2019-04-18</span>
                        </Col>
                        <Col span="12">
                            <span>正常</span>
                        </Col>
                    </Row>
                    <Row class="p10">
                        <Col span="12">
                            <span class="bold">2019-04-19</span>
                        </Col>
                        <Col span="12">
                            <span>正常</span>
                        </Col>
                    </Row>
                    <Row class="p10">
                        <Col span="12">
                            <span class="bold">2019-04-22</span>
                        </Col>
                        <Col span="12">
                            <span>正常</span>
                        </Col>
                    </Row>
                    <Row class="p10">
                        <Col span="12">
                            <span class="bold">2019-04-23</span>
                        </Col>
                        <Col span="12">
                            <span>正常</span>
                        </Col>
                    </Row>
                    <Row class="p10">
                        <Col span="12">
                            <span class="bold">2019-04-24</span>
                        </Col>
                        <Col span="12">
                            <span>正常</span>
                        </Col>
                    </Row>
                    <Row class="p10">
                        <Col span="12">
                            <span class="bold">2019-04-25</span>
                        </Col>
                        <Col span="12">
                            <span>正常</span>
                        </Col>
                    </Row>
                    <Row class="p10">
                        <Col span="12">
                            <span class="bold">2019-04-26</span>
                        </Col>
                        <Col span="12">
                            <span>正常</span>
                        </Col>
                    </Row>
                    <Row class="p10">
                        <Col span="12">
                            <span class="bold">2019-04-29</span>
                        </Col>
                        <Col span="12">
                            <span>正常</span>
                        </Col>
                    </Row>
                    <Row class="p10">
                        <Col span="12">
                            <span class="bold">2019-04-30</span>
                        </Col>
                        <Col span="12">
                            <span>正常</span>
                        </Col>
                    </Row>
                </TabPane>
                <TabPane label="政治业务" name="name2">
                    <Row class="p10">
                        <Col span="12">
                            <span class="bold">02次业务考核</span>
                        </Col>
                        <Col span="12">
                            <span>-1</span>
                        </Col>
                    </Row>
                    <Row class="p10">
                        <Col span="12" >
                            <span class="bold">615政治学习</span>
                        </Col>
                        <Col span="12">
                            <span>-2</span>
                        </Col>
                    </Row>
                    <Row class="p10">
                        <Col span="12">
                            <span class="bold">03次业务考核</span>
                        </Col>
                        <Col span="12">
                            <span>-1</span>
                        </Col>
                    </Row>
                </TabPane>
                <TabPane label="工作纪实" name="name3">
                    <Row class="p10">
                        <Col span="12">
                            <span class="bold">业务受理</span>
                        </Col>
                        <Col span="12">
                            <span>+28</span>
                        </Col>
                    </Row>
                    <Row class="p10">
                        <Col span="12">
                            <span class="bold">社区活动</span>
                        </Col>
                        <Col span="12">
                            <span>+26</span>
                        </Col>
                    </Row>
                    <Row class="p10">
                        <Col span="12">
                            <span class="bold">爱心捐助</span>
                        </Col>
                        <Col span="12">
                            <span>+30</span>
                        </Col>
                    </Row>
                    <Row class="p10">
                        <Col span="12">
                            <span class="bold">社区学习</span>
                        </Col>
                        <Col span="12">
                            <span>+10</span>
                        </Col>
                    </Row>
                </TabPane>
               <TabPane label="效能督查" name="name4">
                   <Row class="p10">
                       <Col span="12">
                           <span class="bold">工作玩游戏</span>
                       </Col>
                       <Col span="12">
                           <span>-10</span>
                       </Col>
                   </Row>
                   <Row class="p10">
                       <Col span="12">
                           <span class="bold">迟到早退</span>
                       </Col>
                       <Col span="12">
                           <span>-10</span>
                       </Col>
                   </Row>
               </TabPane>
            </Tabs>
            <div slot="footer">
            </div>

        </Modal>
        <Table :columns="columns1" :data="data1" style="margin-top: 20px; ">
          <template slot-scope="{ row, index }" slot="operate">
              <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">查看详情</Button>
          </template>
        </Table>
        <div class="page-content">
            <Row>
                <Col span="24" class="lyx-mb10">
                    <Table border ref="selection" :columns="columns4" :data="data1" @on-selection-change="tableSelectChange"></Table>
                </Col>
            </Row>
            <Row type="flex" justify="space-between" class="lyx-mb10">
                <Col span="12">
                    <!--                    <Button @click="handleSelectAll(true)" class="lyx-mr10">全选</Button>-->
                    <!--                    <Button @click="handleSelectAll(false)">取消</Button>-->
                </Col>
                <Col span="12">
                    <Page :total="50" show-total />
                </Col>
            </Row>
        </div>
   </div>
</template>

<script>
export default {

  data () {
    return {
      areaList: [
        {
          value: '大东区',
          label: '大东区'
        },
        {
          value: '和平区',
          label: '和平区'
        },
        {
          value: '皇姑区',
          label: '皇姑区'
        },
        {
          value: '铁西区',
          label: '铁西区'
        }
      ],
      streeList: [
        {
          value: '小东街道',
          label: '小东街道'
        },
        {
          value: '新东街道',
          label: '新东街道'
        },
        {
          value: '大北街道',
          label: '大北街道'
        },
        {
          value: '东站街道',
          label: '东站街道'
        }
      ],
      commList: [
        {
          value: '小东社区',
          label: '小东社区'
        },
        {
          value: '新东社区',
          label: '新东社区'
        },
        {
          value: '大北社区',
          label: '大北社区'
        },
        {
          value: '东站社区',
          lable: '东站社区'
        }
      ],
      nameList: [
        {
          value: '李颖',
          label: '李颖'
        }
      ],
      mode1: '',
      mode2: '',
      mode3: '',
      mode4: '',
      mode5: '',
      modal1: false,
      columns1: [
        {
          title: '姓名',
          key: 'name'
        },
        {
          title: '联系电话',
          key: 'tel'
        }, {
          title: '综合评分',
          key: 'score'
        },
        {
          title: '考勤纪律(30%)',
          key: 'check'
        }, {
          title: '政治业务(20%)',
          key: 'political'
        },
        {
          title: '工作纪实(40%)',
          key: 'work'
        }, {
          title: '效能督查(10%)',
          key: 'xiaoNeng'
        }, {
          title: '操作',
          key: 'operate',
          width: '150',
          align: 'center',
          slot: 'operate'
        }

      ],
      data1: [
        {
          name: '李颖',
          tel: '1334245667',
          score: '94.2分',
          check: '98分',
          political: '96分',
          work: '94分',
          xiaoNeng: '80分'
        },
        {
          name: '王丽华',
          tel: '18942456556',
          score: '95.8分',
          check: '100分',
          political: '92分',
          work: '96分',
          xiaoNeng: '90分'
        },
        {
          name: '韩向阳',
          tel: '15424566743',
          score: '95.1分',
          check: '98分',
          political: '92分',
          work: '96分',
          xiaoNeng: '89分'
        },
        {
          name: '王立坤',
          tel: '13467542890',
          score: '93.6分',
          check: '97分',
          political: '96分',
          work: '91分',
          xiaoNeng: '89分'
        },
        {
          name: '李厚毅',
          tel: '13045321678',
          score: '90分',
          check: '85分',
          political: '90分',
          work: '96分',
          xiaoNeng: '81分'

        }, {
          name: '张涵',
          tel: '18654328908',
          score: '89.6分',
          check: '97分',
          political: '92分',
          work: '91分',
          xiaoNeng: '87分'

        }, {
          name: '李湖',
          tel: '13265789064',
          score: '90.6分',
          check: '87分',
          political: '96分',
          work: '91分',
          xiaoNeng: '89分'

        }
      ]

    }
  },
  methods: {
    show (index) {
      this.modal1 = true
    }
  }
}
</script>

<style scoped>
.p10{
    font-size: 15px;
    padding: 5px;
    text-align: left;
    border-bottom: 1px solid #E8EAEC;
    line-height: 50px;
}
</style>
